<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MNIST WEB BY YBS</title>
    <link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
    <style type="text/css">
            body {
                padding: 0;
                margin: 0 auto;
            }

            #footer {
                height: 40px;
                line-height: 40px;
                position: fixed;
                bottom: 0;
                width: 100%;
                text-align: center;
                background: #333;
                color: #fff;
                font-family: Arial;
                font-size: 12px;
                letter-spacing: 1px;
            }

            .content {
                height: 1800px;
                width: 100%;
                text-align: center;
            }
        </style>
</head>

<body>
		<h1>手写数字识别</h1> <br>

<div class="centered">
    <a href="https://github.com/ybsdegit/Keras_flask_mnist/"><img
            style="position: absolute; top: 0; right: 0; border: 0;"
            src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67"
            alt="Fork me on GitHub"
            data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
    <canvas id="canvas" width="150" height="150"></canvas>
</div>

<div class="centered">
    <input type="button" class="myButton" value="Predict" style="">
    <input type="button" id="clearButton" value="Clear" style="">
</div>

<div class="centered">
    <h1 id="result">Predict</h1><br>
</div>

<br>
<br>
<br>
<p align="center" id="today">今日日期: {{today}}</p>
<p align="center" id="todayNum">今日访问次数: {{visits_today}}</p>
<h2 align="center" id="allNum">总访问次数: {{visits_all}}</h2>


<script src="{{url_for('static',filename='jquery-3.2.0.min.js')}}"></script>
	    <script src="{{url_for('static',filename='index.js')}}"></script>
	    <script type="text/javascript">
	   		$(".myButton").click(function(){
	   			$('#result').text('  Predicting...');
	   			var $SCRIPT_ROOT = {{request.script_root|tojson|safe}};
	   			var canvasObj = document.getElementById("canvas");
	   			var img = canvasObj.toDataURL('image/png');
	   			$.ajax({
	   				type: "POST",
	   				url: $SCRIPT_ROOT + "/predict/",
	   				data: img,
	   				success: function(data){
	   					 $('#result').text('Predicted Output: ' + data.code);
                $('#allNum').text('总访问次数: ' + data.visits_all);
                $('#todayNum').text('今日访问次数: ' + data.visits_today);
                $('#today').text('今日日期: ' + data.today);
	   				}
	   			});
	   		});
	   </script>

       <div id="footer">
           CopyRight@Paulson  |
           <a href="https://github.com/ybsdegit/Keras_flask_mnist/">GitHub</a>
       </div>


</body>
</html>


